<template>
  <div class="wrapper">
    <el-tabs v-model="activeName">
      <el-tab-pane label="页面设置" name="first">
        <template #label>
          <span>
            <el-icon>
              <Setting />
            </el-icon>
            页面设置
          </span>
        </template>
        <div class="el-tab-pane-list">
          <PageConfig />
        </div>
      </el-tab-pane>
      <el-tab-pane label="列表设计" name="second">
        <template #label>
          <span>
            <el-icon>
              <DataLine />
            </el-icon>
            列表设计
          </span>
        </template>
        <div class="el-tab-pane-list">
          <ListControl />
        </div>
      </el-tab-pane>
      <el-tab-pane label="数据设置" name="third">
        <template #label>
          <span>
            <el-icon>
              <Histogram />
            </el-icon>
            数据设置
          </span>
        </template>
        <div class="el-tab-pane-list">
          <DataConfig/>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div class="path"><el-icon :size="24" color="rgb(22, 119, 255)"><Position /></el-icon>test1<el-icon :size="16"><ArrowRight /></el-icon>未命名列表</div>
    <div class="buttons">
      <el-button type="primary" class="el-button--primary-i" @click="handleSave">保存 Ctrl+S</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import PageConfig from "./PageConfig.vue";
import ListControl from "./ListControl.vue";
import DataConfig from "./DataConfig.vue";
import pinia from "@/store/pinia";
import { useStore } from "@/store/lowCode.js";
const lowCodeStore = useStore(pinia);
const activeName = ref("first");

const handleClick = (tab, event) => {
  console.log(tab, event);
};

const handleSave = () => {
  console.log("页面设计内容：");
  console.log(lowCodeStore.ListDesign);
}
</script>

<style lang="less" scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.wrapper {
  position: relative;
  height: 100vh;
  background: rgb(245, 246, 247);
}

.path{
  height: 32px;
  position: absolute;
  left: 15px;
  top: 10px;
  font-size: 13px;
  display: flex;
  align-items: center;

  .el-icon{
    margin-left: 5px;
    margin-right: 5px;
  }
}

.buttons {
  height: 32px;
  position: absolute;
  right: 15px;
  top: 10px;
}

.wrapper /deep/ .el-tabs__item{
  height: 56px;
}

.wrapper /deep/ .el-tabs__nav-wrap {
  background: rgb(255, 255, 255) !important;
}

.wrapper /deep/ .el-tabs__nav {
  width: 310px;
  margin: 0 auto!important;
  float: none;
}

.wrapper /deep/ .el-tabs__content {
  height: calc(100vh - 76px);
  overflow: auto;
}

.el-tab-pane-list {
  width: 1280px !important;
  margin: 0 auto !important;
}
</style>
